<template>
  <div class="main" style="margin: 10px">
    <el-card>
      <too-bar :AddBtnAuth="AddBtnAuth" @handleAdd='handleAdd'></too-bar>
      <el-card style="margin-top: 10px">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          row-key="_id"
          lazy
          :load="getChildMenus"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >>
          <el-table-column type="index" label="#" width="55"></el-table-column>
          <el-table-column
            prop="title"
            label="菜单标题"
            width="165"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="70">
            <template slot-scope="scope">
              <!-- <svg-icon :icon-class="scope.row.icon" v-if="scope.row.icon" /> -->
              <e-icon :icon-name="scope.row.icon" v-if="scope.row.icon" />
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序" width="70" align="center">
          </el-table-column>
          <el-table-column
            prop="permissions"
            width="70"
            label="权限标识"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.permissions == "" ? "--" : scope.row.permissions }}
            </template>
          </el-table-column>
          <el-table-column
            prop="component"
            label="组件路径"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.component == 'Layout'">--</span>
              <span v-else>{{
                scope.row.component == undefined ? "--" : scope.row.component
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="菜单类型"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.type == 1">目录</el-tag>
              <el-tag type="warning" v-if="scope.row.type == 2">菜单</el-tag>
              <el-tag type="danger" v-if="scope.row.type == 3">按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="hidden" label="是否可见" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.hidden"
                disabled
                active-value="1"
                active-text="是"
                inactive-value="0"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="hidden" label="是否缓存" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.noCache"
                disabled
                active-value="1"
                active-text="是"
                inactive-value="0"
                inactive-text="否"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="创建日期"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.date | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                :disabled="scope.row.system == 1"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                :disabled="scope.row.system == 1"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <dialog-menu  :dialogMenu="dialogMenu" :formData="formData" @handelSubmit="handelSubmit" @handleSubmitEdit="handleSubmitEdit"></dialog-menu>
  </div>
</template>

<script>
import TooBar from "@/components/System/toobar";
import { getMenuList,addMenu,deleteMenu,updateMenu } from "@/api/system/index";
import DialogMenu from '../../../components/System/dialogMenu.vue';
export default {
  components: {
    TooBar,
    DialogMenu
  },
  data() {
    return {
      AddBtnAuth: ["add"],
      tableData: [],
      dialogMenu:{
        show:false,
        title:undefined,
        type:undefined
      },
      formData:{
        type:undefined,
      }
    };
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      getMenuList({ pid: 0 }).then((res) => {
        this.tableData = res.data;
      });
    },
    getChildMenus(tree, treeNode, resolve) {
      const data = { pid: tree._id }
      getMenuList(data).then((res) => {
        console.log(res)
        resolve(res.data)
      });
    },
    handleAdd(){
      this.dialogMenu = {
        show : true,
        title : "新增菜单",
        option:"add"
      }
      this.formData = {
        type: 1,
        hidden: 1,
        pid: "",
        icon: "",
        path: "",
        title: "",
        sort: "",
        name: "",
        component: "",
        permissions: "",
        noCache: "0"
      }
    },
    handelSubmit(){
      addMenu(this.formData).then(res => {
        console.log(res);
        this.dialogMenu.show = false
        this.$message.success('新增成功！')
        if (this.formData.pid != 0) {
          // 实现无感刷新
          getMenuList({ pid: this.formData.pid }).then(res => {
            this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.pid, res.data)
          })
        } else {
          this.getMenuList()
        }
      })
    },
    handleDelete(row){
      deleteMenu(row._id).then(res=>{
        
        getMenuList({
            pid:row.pid
          }).then(res=>{
            // 无感刷新
            this.$set(this.$refs.table.store.states.lazyTreeNodeMap,row.pid,res.data)
          })
          
        if(row.pid == 0){
          this.getMenuList()   //顶级栏目直接重新获取
        }
      })
    },
    handleEdit(row){
      this.dialogMenu = {
        show:true,
        title:"修改菜单",
        option:"edit"
      }
      this.formData = {
         id: row._id,
        type: row.type,
        icon: row.icon,
        hidden: row.hidden,
        title: row.title,
        path: row.path,
        sort: row.sort,
        name: row.name,
        component: row.component,
        pid: row.pid + '',
        permissions: row.permissions,
      }
    },
    handleSubmitEdit(){
      updateMenu(this.formData.id,this.formData).then(res=>{
        this.dialogMenu.show = false
        if(this.formData.pid != 0){
          if (this.formData.pid != this.oldPid) {
            // 这时候说明已经改变了上级类目
            getMenuList({ pid: this.oldPid }).then(res => {
              this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.oldPid, res.data)
              getMenuList({ pid: this.formData.pid }).then(res => {
                this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.pid, res.data)
              })
            })
          } else {
            getMenuList({ pid: this.formData.pid }).then(res => {
              this.$set(this.$refs.table.store.states.lazyTreeNodeMap, this.formData.pid, res.data)
            })
          }
        }else{
          console.log("等于0")
          this.getMenuList()
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
</style>